@import '../style/theme/color';

:host {
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
}

.devui-toggle {
  background: $gray-1;
  border: 1px solid $gray-1;
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  overflow: visible;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: 0.3s ease-out all;

  &:not(.devui-checked):hover {
    border-color: $gray-1;
  }

  &:active {
    border-color: $brand-2;
  }

  &.devui-checked:hover {
    border-color: $hover-control;
  }

  small {
    background: $font-white;
    border-radius: 100%;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: 0.3s ease-out all;
  }

  &.devui-toggle-large {
    width: 76px;
    height: 40px;
    border-radius: 40px;

    & small {
      width: 38px;
      height: 38px;
      top: 1px;
      left: 1px;
    }

    &.devui-checked small {
      background: $font-white;
      left: 37px;
    }
  }

  &.devui-toggle-medium {
    width: 58px;
    height: 30px;
    border-radius: 30px;

    & small {
      width: 28px;
      height: 28px;
      top: 1px;
      left: 1px;
    }

    &.devui-checked small {
      background: $font-white;
      left: 29px;
    }
  }

  &.devui-toggle-small {
    width: 36px;
    height: 18px;
    border-radius: 18px;

    & small {
      width: 16px;
      height: 16px;
      position: absolute;
    }

    &.devui-checked small {
      left: 19px;
    }
  }

  &.devui-checked {
    background: $brand-1;
    border-color: $brand-1;

    &:hover {
      background: $hover-control;
      border-color: $hover-control;
    }

    &:active {
      background: $brand-2;
      border-color: $brand-2;
    }
  }

  &.devui-disabled {
    &,
    &:hover,
    &:active,
    &.devui-checked {
      cursor: not-allowed;
      background-color: $disabled-border;
      border-color: $disabled-border;

      small {
        background-color: $font-white;
      }
    }
  }
}
